<template>
	<div class="great-video-box" v-if="isGreatVideoBox">
		<div class="top-box">
			<p class="left-p">精彩回放</p>
			<div class="more-box" @click="clickMoreGreatPage">
				<p>更多</p>
				<Iconfont iconClass="iconfont iconyoujiantou" />
			</div>
		</div>
		<ul class="great-ul">
			<li v-for="v of homeGreatVideoListArray" :key='v.id' @click="linkLiveBack(v.id)">
				<img class="video-cover" :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_205,w_363'"/>
				<div class="great-right">
					<p>{{v.title}}</p>
					<div class="video-pv-box">
						<img src="../../assets/images/zxyh/person-icon.png"/>
						<span>{{v.fwCount}}</span>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				isGreatVideoBox:false,
				homeGreatVideoListArray:[]
			}
		},
		created(){
			this.getHomeGreatVideo()
		},
		methods:{
			linkLiveBack(vid){
				this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);
			},			
			//获取首页精彩视频
			getHomeGreatVideo() {
				this.$http.get("h5live/zx/home/niceBackVideos").then(res => {//useType 1 是 首页    2 专辑管理
						if(res.data.code == "000000") {							
							if(res.data.data.length!='0'){
								//console.log(res.data.data)								
                                this.homeGreatVideoListArray = res.data.data;
                                this.isGreatVideoBox = true
							}
						}
					})
					.catch(response => {

					});
			},
			clickMoreGreatPage() { 
				this.$router.push({
				path: `/${this.$channel}/moreVideo`,
				});
			},
		}
	}
</script>

<style scoped="scoped">
	.iconyoujiantou{
		font-size: 24px;
	}
		.video-pv-box{
		/*background: salmon;*/
		font-size: 22px;
		font-weight: 500;
		color: #929292;
		line-height: 40px;
		position: absolute;
		bottom: 33px;
		left: 20px;
	}
	.video-pv-box img{
		width: 20px;
		height: 20px;
		margin-right: 9px;		
	}
	.great-right{
		flex: 1;
		/*background: darkcyan;*/
		padding-left: 20px;
		position: relative;
	}
	.great-right p{
		font-size: 28px;
		font-weight: 400;
		color: #3B3B3B;
		line-height: 40px;
		margin-top: 32px;		
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.great-ul li{
		width: 100vw;
		padding: 15px 30px 15px 30px ;
		display: flex;
	}
	.great-ul li .video-cover{
		width: 363px;
		height: 205px;
		border-radius: 8px;
	}
		.top-box{
		width:100vw ;
		height: 90px;		
		display: flex;
		/*justify-content: flex-start;
		align-items: center;*/
		line-height: 90px;
		/*background: saddlebrown;*/
	}
		.more-box{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 30px;
		font-size: 27px;
		font-weight: 500;
		color: #777777;
	}
	.more-box p{
		font-size: 27px;
		font-weight: 400;
		color: #777777;
		margin-right: 3px;
	}
	.left-p{
		font-size: 35px;
		font-weight: 800;
		color: #34323F;
		margin-left: 30px;
	}
</style>